import { useState,useRef } from "react";
import "./App.css";
import _ from 'lodash'
import classNames from "classnames";
import {v4 as uuidV4} from 'uuid'
import dayjs from "dayjs";
import userIcon from './assets/images/icon-user.png'
// 列表渲染
const list = [
  {
    rpid: 1,
    user: {
      uid: "13258165",
      avatar: "https://ts1.tc.mm.bing.net/th/id/R-C.f925b6671e1dd7c2171b71aa7a868162?rik=Jvz1OIt29KCaNA&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2019%2f09%2f31475-6.jpg&ehk=2ojlLH21omrJd%2bECRhCtsH7vxk5K%2fVV26%2fJoUEcDmFw%3d&risl=&pid=ImgRaw&r=0",
      uname: "周杰伦",
    },
    content: "这是一条评论回复",
    time: "2025-01-12",
    like: 100,
  },
  {
    rpid: 2,
    user: {
      uid: "132581653",
      uname: "张三",
      avatar: "https://ts1.tc.mm.bing.net/th/id/R-C.f925b6671e1dd7c2171b71aa7a868162?rik=Jvz1OIt29KCaNA&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2019%2f09%2f31475-6.jpg&ehk=2ojlLH21omrJd%2bECRhCtsH7vxk5K%2fVV26%2fJoUEcDmFw%3d&risl=&pid=ImgRaw&r=0",
    },
    content: "这是一条评论回复",
    time: "2025-03-12",
    like: 45,
  },
  {
    rpid: 3,
    user: {
      uid: "132581654",
      avatar: "https://ts1.tc.mm.bing.net/th/id/R-C.f925b6671e1dd7c2171b71aa7a868162?rik=Jvz1OIt29KCaNA&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2019%2f09%2f31475-6.jpg&ehk=2ojlLH21omrJd%2bECRhCtsH7vxk5K%2fVV26%2fJoUEcDmFw%3d&risl=&pid=ImgRaw&r=0",
      uname: "邓磊",
    },
    content: "这是一条评论回复",
    time: "2025-04-12",
    like: 299,
  },
];

let user = {
  uid: "132581654",
  uname: "邓磊",
};

const tabList = [
  {
    name: "最新",
    id: 0,
  },
  {
    name: "最热",
    id: 1,
  },
];

function App() {
  let [commentList, setCommentList] = useState(list);
  let [content,setContent] = useState('');
  const handleDelete = (id) => {
    setCommentList(commentList.filter((item) => item.rpid !== id));
  };

  let [curType, setCurType] = useState(0);
  let inputRef = useRef(null);

  const handleChangeTab = (id) => {
    console.log("id", id);
    setCurType(id);
    if(id === 0 ){
      setCommentList(_.orderBy(commentList,'time','desc'))
    } else {
      setCommentList(_.orderBy(commentList,'like','desc'))
    }
  };
  // 发布
  const handlePublish = ()=>{
    setCommentList([
      ...commentList,
      {
        rpid: uuidV4(),
        user: {
          uid: "13258165",
          avatar: "https://ts1.tc.mm.bing.net/th/id/R-C.f925b6671e1dd7c2171b71aa7a868162?rik=Jvz1OIt29KCaNA&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2019%2f09%2f31475-6.jpg&ehk=2ojlLH21omrJd%2bECRhCtsH7vxk5K%2fVV26%2fJoUEcDmFw%3d&risl=&pid=ImgRaw&r=0",
          uname: "周杰伦",
        },
        content: content,
        time: dayjs(new Date()).format('YYYY-MM-DD hh:mm:ss'),
        like: 100,
      },
    ])

     setContent('')
     inputRef.current.focus();

  }
  return (
    <div className="App">
      <div className="reply-header">
        <div className="reply-prefix-title">
          评论 <span className="reply-count">{list.length}</span>
        </div>
        <div className="md-tab-list">
          {tabList.map((item) => (
            <div
              key={item.id}
              className={classNames('md-tab-item',{'md-tab-active':curType === item.id})}
              onClick={() => handleChangeTab(item.id)}
            >
              {item.name}
            </div>
          ))}
        </div>
      </div>
      <div className="reply-submit-form">
        <img src={userIcon} alt="" />
        <input
          className="md-input-wrap"
          type="text"
          ref={inputRef}
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="发一条友善的评论"
        />
        <button className="md-action-btn" type="button" onClick={handlePublish}>
          发布
        </button>
      </div>
      {/* 列表渲染 */}
      <div className="reply-list">
        {commentList.map((item) => (
          <div key={item.rpid} className="reply-item">
           <div className="user-info">
              <img className="icon-avatar"  src={item.user.avatar} alt="" />
              <div className="reply-username">{item.user.uname}</div>
           </div>
            <div className="reply-content">{item.content}</div>
            <div className="reply-footer">
              <div className="reply-tip">{item.time}</div>
              <div className="reply-tip">点赞数：{item.like}</div>
              {user.uid === item.user.uid && (
                <div
                  className="reply-action"
                  onClick={() => handleDelete(item.rpid)}
                >
                  删除
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;
